<template>
  <div id="reportGroup">
    <el-row style="padding: 20px">
      <el-col :span="2">
        <el-button type="primary" @click="changeStatus">添加</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-col>
      <el-dialog title="添加" :visible.sync="dialogVisible" size="tiny">
        <el-form :model="form">
          <el-form-item label="银行名称" :label-width="formLabelWidth" style="text-align: left">
            <el-input v-model="form.cardBank" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" :label-width="formLabelWidth">
            <el-input v-model="form.cardNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="预留手机号" :label-width="formLabelWidth" style="text-align: left">
            <el-input v-model="form.cardPhone" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="持卡人" :label-width="formLabelWidth">
            <el-input v-model="form.cardPerson" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="余额" :label-width="formLabelWidth" style="text-align: left">
            <el-input v-model="form.balance" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remark" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addBank">确 定</el-button>
  </span>
      </el-dialog>
      <el-col :span="12"><h3>银行卡列表</h3></el-col>

    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="cardBank" label="银行名称">
        </el-table-column>
        <el-table-column prop="cardNo" label="银行卡号">
        </el-table-column>
        <el-table-column prop="cardPhone" label="预留手机号">
        </el-table-column>
        <el-table-column prop="cardPerson" label="持卡人姓名">
        </el-table-column>
        <el-table-column prop="balance" label="余额">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>

        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="reviseBank(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: right;padding-right: 40px;">

        <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                       :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        dialogVisible: false,
        formLabelWidth: '80px',
        form: {
          cardNo: '',
          cardPerson: '',
          cardBank: '',
          cardPhone: '',
          balance: '',
          businessGroupId: this.$route.query.id,
          remark: ''
        }
      }
    },
    created () {
      this.getGroupList()
    },
    methods: {
      getGroupList () {
        this.loading = true
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getBusinessCard(this.$route.query.id, params).then(res => {
          if (res.code === '000000') {
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.totalRow
            this.$message.success('获取银行卡列表成功')
          }
        })
      },
      changeStatus () {
        this.dialogVisible = true
        sessionStorage.setItem('bank id', '')
      },

      addBank () {
        this.dialogVisible = false
        let id = sessionStorage.getItem('bank id')
        if (id) {
          this.form.id = id
        } else {
          if (this.form.id) {
            delete this.form.id
          }
        }
        this.$api.saveBusinessCard(this.form).then(res => {
          this.$message.success('操作成功')
          this.getGroupList()
        })
      },
      reviseBank (row) {
        this.dialogVisible = true
        sessionStorage.setItem('bank id', row.id)
        for (let i in row) {
          for (let j in this.form) {
            if (i === j) {
              this.form[j] = row[i]
            }
          }
        }
      },
      goBack () {
        this.$router.go(-1)
      },
      handleChange (val) {
        this.pageNumber = val
        this.getGroupList()
      }
    }
  }
</script>

<style lang="less">
  #reportGroup {
    th {
      text-align: center;
    }
  }
</style>
